<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var btn1 = document.getElementById('btn1');
            var box1 = document.getElementById("box1");
            btn1.onclick = function () {
                // alert(box1.style.width) //这样只能获取内联样式（就是直接在标签上通过或style添加的样式）

                /**
                 * 获取元素当前显示的样式
                 *  - 语法：元素.currentStyle.样式名
                 * 可以用来读取当前元素显示的样式，他只支持IE浏览器
                 */
                // alert(box1.currentStyle.width)
                /**
                 * 获取元素当前显示的样式
                 * getComputedStyle：获取元素当前显示的样式，他支持所有浏览器,除了IE8
                 */
                alert(getComputedStyle(box1).backgroundColor)
            }


            /**
             * 自定义获取样式方法
             * 由于getcomputedStyle()方法，在IE8及IE8以下，无法获取元素当前显示的样式，
             * 所以需要使用currentStyle属性来获取元素当前显示的样式
             * 而currentStyle属性，只能用来获取内联样式，即通过style属性添加的样式
             * @param obj 要获取样式的元素
             * @param name 要获取的样式名
             */
            function getStyle(obj, name) {
                return window.getComputedStyle ? getComputedStyle(obj, null)[name] : obj.currentStyle[name]
                // if (window.getComputedStyle) {
                //     // 正常浏览器
                //     return getComputedStyle(obj, null)[name]
                // }else {
                //     // IE8及IE8以下
                //     return obj.currentStyle[name]
                // }
            }
        }
    </script>
</head>

<body>
<button id="btn1">点击</button>
<br/>
<div id="box1" style="width: 200px ;height: 200px ;background-color: black">
</div>
</body>

<style>
    #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

</html>
